<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-08-29 15:34:18
 * @LastEditTime: 2023-10-18 14:34:33
-->
<template>
    <div class="t1" :style="myStyle">
        <div v-for="(item, index) in navLists" v-bind:key="item.name" class="t2" @click="select(item.name, index)" 
        :class="defaultClicks == item.name ? 'select' : ''">
            <img class="t3" :src="item.img">
            <div class="t4" :class="defaultClicks == item.name ? 'select' : ''">{{ item.name }}</div>
        </div>
    </div>
</template>
    
<script>
export default {
    name: "EntrustDetail",
    emits: ["returnData"],
    components: {},
    props: {
        navList: Array,
        defaultClick: String,
        myStyle: {
            default: {},
        },
    },
    data() {
        return {
            navLists: this.navList,
            defaultClicks: this.defaultClick,
        }
    },
    mounted() {},
    methods: {
        select(name, index) {
            this.defaultClicks = name
            this.$emit("returnData", index)
        },
    },
    watch: {},
    computed: {},
}
</script>

<style scoped>
.t1 {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ddd;
    margin-left: 30px;
    padding: 15px 10px;
    font-weight: 600;
}

.t2 {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: black;
    padding: 10px 2px;
    margin-top: 10px;
    position: relative;
}

.t3 {
    width: 25px;
    height: 25px;
    margin-left: 10px;
}
.t2::before {
    content: "";
    width: 1px;
    height: 30px;
    background: #6698ff29;
    position: absolute;
    left: 23px;
    bottom: -20px;
}
.t2:last-child::before {
    width: 0px;
    height: 0px;
}

.t4 {
    padding-left: 10px;
    color: gray;
    white-space: nowrap;
    margin-right: 15px;
}

.select {
    background-color: #6698ff;
    border-radius: 8px;
    color: white;
    white-space: nowrap;
}
</style>